<!DOCTYPE html>
<html>
<head>
	<title>添加规格模板</title>
	<include file='public/head'>
	<style>
		.layui-legend-size{font-size:14px !important;}
		.layui-nopadding{padding:0 !important;}
		.layui-overflow{overflow:auto;}
		.layui-nomargin{margin: 0 !important;}
		.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
		.layui-input{height:30px !important; }
		.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
		.layui-form-search-item label{margin-left: 15px;}
		.layui-table-page {padding: 7px 0px 0px;}
		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
	</style>		
</head>
<body>

<form id="f" class="layui-form">
	<table class="layui-table layui-nomargin">
		<tr>
			<td width="20%"><b>模板名</b></td>
			<td>
				<input type="text" class="layui-input" name="module_name" value="" placeholder="请输入模板名">
			</td>
		</tr>
		<tr>
			<td><b>所属分类</b></td>
			<td>
		        <select name="cid" lay-filter="list" lay-verify="required" lay-search="">
		          <option value="0"></option>
		          {$select}
		        </select>				
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<a href="javascript:;" class="layui-btn layui-btn-xs add-spec" data-id=""><i class="layui-icon">&#xe654;</i>添加规格</a>
			</td>
		</tr>			
	</table>
	<br>
	<div id="addspec">
	</div>	
</form>
	<include file='public/scripts'>

<script type="text/javascript">

	var form = layui.form;

	    //选择触发
		form.on('select(list)', function(data){
            let selectText=data.elem[data.elem.selectedIndex].text;//得到被选中的文本值
            // 去空格
            selectText=selectText.replace(/\s+/g, "");
            data.elem[data.elem.selectedIndex].text=selectText;//覆盖原文本值
        });	
	
	function tijiao(){
		//提交
		$.ajax({
			url:"{:cmf_plugin_url('Goods://goods_spec/addspec')}",
			data: $('#f').serialize(),
			type:'post',
			success:function(data){
				if (data.code == 1) {
					layer.msg(data.msg,{icon:1,time:1500},function(){
						parent.layer.closeAll();
						parent.location.reload(); 
					});
				} else {
					layer.msg(data.msg,{icon:2,time:1500});
				}
			},
			error:function()
			{
				layer.msg('系统错误',{icon:2,time:1500});
			}
		})
	}	


	var num = 0;

	//添加一个规则
	$('.add-spec').on('click',function(){
		$('#addspec').append("<table class='layui-table layui-nomargin'><thead><tr><td colspan='2'><div><div class='layui-input-inline' style='width:80%'><input type='text' autocomplete='off' class='layui-input' name='spec[add]["+num+"]' placeholder='请输入规格名'></div><a href='javascript:;' class='layui-btn layui-btn-xs add-attr' data-id='"+num+"'><i class='layui-icon'>&#xe654;</i>添加属性</a><a href='javascript:;' class='layui-btn layui-btn-xs layui-btn-danger delete-spec'  data-id=''><i class='layui-icon'>&#xe640;</i>删除规格</a></div></td></tr></thead><tbody></tbody></table>");		
		num++;
	});



	//添加一个属性
	$(document).on("click", ".add-attr", function (e) {
		let id = $(this).data('id');
	    $(this).parent().parent().parent().parent().parent().find('tbody').append("<tr><td><div><div class='layui-input-inline' style='width:50%'><input type='text' name='attr["+id+"][]' autocomplete='' class='layui-input' placeholder='请输入属性名'></div><a href='javascript:;' class='layui-btn layui-btn-xs layui-btn-danger delete-attr' data-id=''><i class='layui-icon'>&#xe640;</i>删除属性</a></div></td></tr>");
	});	



	//删除属性
	$(document).on("click", ".delete-attr", function (e) {
		$(this).parent().remove();
	});

	//删除规则
	$(document).on("click", ".delete-spec", function (e) {
		$(this).parent().parent().parent().remove();
	});	

</script>
<!-- <div class='layui-input-inline'></div> -->
</body>
</html>	